// 自定义页码
import { Pagination } from '@alifd/next';
import React, { useEffect } from 'react';
import { PagingInfo } from '@/services/images';

export interface ZPaginationProps {
  total?: number;
  // 页码 更新
  onChange: (pagingInfo: PagingInfo) => void;
  pagingInfo: PagingInfo;
  setPagingInfo: React.Dispatch<React.SetStateAction<PagingInfo>>;
}

const ZPagination: React.FC<ZPaginationProps> = ({
                                                   total,
                                                   onChange,
                                                   pagingInfo,
                                                   setPagingInfo,
                                                 }) => {
  useEffect(() => {
    onChange(pagingInfo);
  }, [pagingInfo]);
  return (<Pagination
    className="mt-20px z-centered"
    pageSizeSelector="dropdown"
    pageSizePosition="end"
    shape="arrow-only"
    pageSizeList={[1, 20, 50]}
    pageSize={pagingInfo.take}
    total={total}
    onPageSizeChange={(pageSize) => setPagingInfo({
      ...pagingInfo,
      take: pageSize,
    })}
    onChange={current => setPagingInfo({
      ...pagingInfo,
      skip: current,
    })}
  />);
};
export default ZPagination;
